<?php /*a:2:{s:55:"/www/wwwroot/mall/public/template/mall/goods/index.html";i:1628573574;s:64:"/www/wwwroot/mall/public/template/mall/../index/public/mlay.html";i:1624501447;}*/ ?>
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title><?php echo htmlentities((isset($page_title) && ($page_title !== '')?$page_title:config('app.web_site_title'))); ?></title>
		<meta name="keywords" content="<?php echo config('app.web_site_keywords'); ?>">
		<meta name="description" content="<?php echo config('app.web_site_description'); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, shrink-to-fit=no, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		
		
		<!-- Icons -->
		<link rel="icon" href="/static/images/favicon.ico">
		<!-- END Icons -->
		
		<!-- Stylesheets -->
		<link rel="stylesheet" href="/static/libs/weui/css/weui.min.css">
		<link rel="stylesheet" href="/static/libs/weui/css/common.css?v=<?php echo config('app.asset_version'); ?>">
		<link rel="stylesheet" href="/static/css/font/iconfont.css?v=<?php echo config('app.asset_version'); ?>">
		<!-- END Stylesheets -->
		
<style>
	.input {
		padding: 0.3rem 0.5rem;
		font-size: 0.8rem;
	}

	.actives {
		color: #fff;
		background: #BFA073;
		border-radius: 30px;
		/* position: relative; */
	}
	.css_search{
		/* border-radius: 30px; */
		/* margin: 0.5rem; */
		margin-top: 2rem;
		border-top: 0.5rem solid #f5f5f5;
		border-bottom: 0.5rem solid #f5f5f5;
		background: #f5f5f5;
		position: fixed;
		z-index: 1000;
		width: 100%;
	}
	.css_search form{
		border-radius: 20px;
		margin: 0 0.5rem;
	}
	.add-cart {
		border-radius: 30px;
		background: #a78928;
		text-align: center;
		color: #fff;
		margin: 0rem 3rem;
		padding: 0.5rem 2rem;
		font-size: 0.8rem;
	}

	.add_car {
		width: 0.75rem;
		height: 0.75rem;
	}

	.goods {
		flex: 0 0 50%;
		padding: 0 0.5rem;
		/* background: #f8f8f8; */
		padding-bottom: 0.5rem;
		border-radius: 0.5rem;
		margin-bottom: 0.5rem;
	}
	.tab-bar {
		/* 横向超出滚动 */
		overflow-x: scroll;
		white-space: nowrap;
		vertical-align: middle;
		/* margin-bottom: 20rpx; */
	}
	
	.tab-bar::-webkit-scrollbar {
		/* 去滚动下划线 */
		display: none;
	}
	.tab_boss{
		width: 3.85rem;
	}
	.tab_one{
		display: flex;
		justify-content: space-between;
		font-size: 0.8rem;
		padding-bottom: 5px;
		position: fixed;
		z-index: 1000;
		top: 0;width: 100%;
		padding: 0.3rem 0.5rem;
		background: #fff;
		overflow: hidden;
		overflow-x: scroll;
	}
	.tab_one_box{
		padding: 0.1rem 0.3rem;
	}
	.tab_two{
		height: 100%;
		position: fixed;
	}
	.tab_two_box{
		margin: 0.6rem 0.3rem;
		flex-wrap: wrap;
		width: 3.25rem;
		font-size: 0.7rem;
		text-align: center;
	}
	.van-stepper--round .van-stepper__plus{
		background-color: #a78928 !important;
	}
	.van-stepper--round .van-stepper__minus{
		color: #a78928 !important;
		border: 1px solid #a78928 !important;
	}
	.goods_title{
		font-size: 0.75rem;
		/* color: #fff;
		position: absolute;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		width: 100%; */
		text-align: center;
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.img_cover{
		height: 100%;
		margin: 0 auto;
		display: block;
		border-radius: 0.4rem;
	}
	.goods_detail{
		overflow: hidden;
		height: 5rem;
		position: relative;
		background: #fff;
	}
</style>
<!-- 公共css样式在这里 弹性布局也在这里 -->
<link rel="stylesheet" href="/template/static/css/public.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />

	</head>
	<body id="<?php echo htmlentities(strtolower(app('request')->app())); ?>-<?php echo htmlentities(strtolower(app('request')->controller())); ?>-<?php echo htmlentities(strtolower(app('request')->action())); ?>">
		<!-- Page Container -->
		<div class="page" id="main">
			
			
<div id="app">
	<div class="css_search">
		<form class="bagfff" action="" @submit.prevent="search">
			<input class="input" type="search"
				placeholder="<?php if(app('request')->param('keyword') == ''): ?>你要查找的商品关键字<?php else: ?>搜索：<?php echo htmlentities((app('request')->param('keyword') ?: '商品')); ?><?php endif; ?>"
				v-model="keyword" />
		</form>
	</div>
	<div class="tab_one tab-bar">
		<div class="tab_one_box" @click="tab(item.id)" :class="{actives:isActive==item.id}"
			v-for="(item,index) in list" :key="index" v-cloak>
			{{item.title}}
		</div>
	</div>
	<div style="padding-top: 5rem;" class="flex">
		<!-- <?php if(!(empty($child) || (($child instanceof \think\Collection || $child instanceof \think\Paginator ) && $child->isEmpty()))): ?>
		<div class="tab_boss">
			<div class="tab_two">
				<div v-for="(item,index) in the_side" class="tab_two_box" @click="tab(item.id)" :class="{actives:isActive==item.id}" v-cloak>
					{{item.title}}
				</div>
			</div>
		</div>
		<?php endif; ?> -->
		<div v-if="this.the_side.length!=0" class="tab_boss">
			<div class="tab_two">
				<div v-for="(item,index) in the_side" class="tab_two_box" @click="tab(item.id)" :class="{actives:isActive==item.id}" v-cloak>
					{{item.title}}
				</div>
			</div>
		</div>
		<div class="bagfff" style="border-radius: 0.4rem;padding: 8px;flex: 1;min-height: 70vh;">
			<div class="flex ju_sb" style="flex-wrap: wrap;">
				<div class="goods" v-for="(item,index) in Data" :key="index">
					<div style="background: #f8f8f8;border-radius: 10px;border: 0.2rem solid #f8f8f8;border-radius: 10px;" class="">
						<div @click="details(item.id)" class="goods_detail">
							<img class="img_cover"v-cloak :src="item.cover">
							<!-- <div class="goods_title"v-cloak>{{item.title}}</div> -->
						</div>
						<div class="goods_title"v-cloak>{{item.title}}</div>
						<div style="padding: 0 0.5rem;" class="flex ju_sb ai_center">
							<div style="color: #a88b2c;font-size: 0.7rem;">￥
								<span style="font-size: 0.95rem;" v-cloak>{{item.price}}</span>
							</div>
							<img @click="add_car(item,item.id)" class="add_car" src="/template/static/img/cart_img.png">
						</div>
					</div>
				</div>
			</div>
			<van-popup position="bottom" round :style="{ height: '40%' }" v-model="show2">
				<div v-show="show2" style="padding: 1rem 1rem;display: none;" class="">
					<div class="flex">
						<img style="width: 3rem;height: 3rem;border-radius: 10px;margin-right: 0.5rem;" v-cloak
							:src="cover">
						<div class="">
							<div v-cloak>{{title}}</div>
							<div style="color: #a78928;" v-cloak>{{price}}元</div>
						</div>
					</div>
					<p style="padding: 0.5rem 0;font-size: 0.8rem;">备注:<input v-model="note" type="text"
							placeholder="请输入" value="" /></p>
					<van-stepper @change="stepper" v-model="value" theme="round" button-size="22" disable-input>
					</van-stepper>
				</div>
				<div @click="add" v-show="show2" class="add-cart" style="display: none;">
					添加购物车
				</div>
			</van-popup>
			<div style="text-align: center;color: #a5a5a5;" v-if="this.length==0" class="">
				<img style="width: 5rem;" src="/template/static/img/icon/there_is_no_order.png" >
				<p>没有商品</p>
			</div>
			<div style="text-align: center;font-size: 0.8rem;color: #686868;" v-show="show" class="">
				没有更多了
			</div>
		</div>
	</div>
</div>

		</div>
		<!-- END Page Container -->
		<!-- FOOT -->
		
		<!-- Copyright -->
		<div class="weui-footer padding-tb">
			<!-- 		<p class="weui-footer__links">
	<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
	</p> -->
			<p class="weui-footer__text"><?php echo config('app.web_site_copyright'); ?></p>
		</div>
		<!-- Copyright -->
		
		
		<!-- Footer -->
		<!-- 工具栏 -->
		<div class="footer"></div>
		<?php if(!(empty($nav['main_nav']) || (($nav['main_nav'] instanceof \think\Collection || $nav['main_nav'] instanceof \think\Paginator ) && $nav['main_nav']->isEmpty()))): ?>
		<nav class="bar-tab weui-flex">
			<?php if(is_array($nav['main_nav']) || $nav['main_nav'] instanceof \think\Collection || $nav['main_nav'] instanceof \think\Paginator): $i = 0; $__LIST__ = $nav['main_nav'];if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$menu): $mod = ($i % 2 );++$i;?>
			<a class="tab-item weui-flex__item<?php if(isset($active) && $active == $menu['rel']): ?> active<?php endif; ?>" href="<?php echo htmlentities($menu['url']); ?>">
				<span class="icoimg <?php echo htmlentities($menu['css']); if(isset($active) && $active == $menu['rel']): ?>-full<?php endif; ?>"></span>
				<span class="tab-label"><?php echo htmlentities($menu['title']); ?></span>
			</a>
			<?php endforeach; endif; else: echo "" ;endif; ?>
		</nav>
		<?php endif; ?>
		<!-- Footer -->
		

		
		<ul id="Fixed">
			<li id="goTop" class="ico ico-up hidden" title="去顶部"></li>
		</ul>
		
		<!-- END FOOT-->
		<div class="hidden">
			
			<?php echo config('app.web_site_statistics'); ?>
			
		</div>
		<!--js -->
		<script src="/static/libs/weui/js/jquery.min.js"></script>
		<script src="/static/libs/weui/js/weui.min.js"></script>
		<script src="/static/libs/weui/js/common.js?<?php echo config('app.asset_version'); ?>"></script>
		
		<?php if(!(empty($jssdk) || (($jssdk instanceof \think\Collection || $jssdk instanceof \think\Paginator ) && $jssdk->isEmpty()))): ?>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			wx.config({
				debug: false,
				appId: '<?php echo htmlentities($jssdk['appid']); ?>',
				timestamp: '<?php echo htmlentities($jssdk['timestamp']); ?>',
				nonceStr: '<?php echo htmlentities($jssdk['noncestr']); ?>',
				signature: '<?php echo htmlentities($jssdk['signature']); ?>',
				jsApiList: [
					'updateAppMessageShareData',
					'updateTimelineShareData',
					'hideMenuItems',
					'showMenuItems',
					'closeWindow',
				],
				openTagList: ['wx-open-launch-weapp']
			});
			wx.ready(function() {
				wx.updateAppMessageShareData({
					title: "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					desc: "<?php echo htmlentities((isset($share['desc']) && ($share['desc'] !== '')?$share['desc']:config('app.web_site_slogan'))); ?>", // 分享描述
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				wx.updateTimelineShareData({
					title:  "<?php echo htmlentities((isset($share['title']) && ($share['title'] !== '')?$share['title']:config('app.web_site_title'))); ?>", // 分享标题
					link: "<?php echo htmlentities((isset($share['url']) && ($share['url'] !== '')?$share['url']:$jssdk['url'])); ?>", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: "<?php echo htmlentities((isset($share['img']) && ($share['img'] !== '')?$share['img']:app('request')->scheme() . '://' .app('request')->host() .'/static/images/share.png')); ?>", // 分享图标
					success: function() {
						// 设置成功
					}
				});
				<?php if(!(empty($share['hide']) || (($share['hide'] instanceof \think\Collection || $share['hide'] instanceof \think\Paginator ) && $share['hide']->isEmpty()))): ?>
				wx.hideMenuItems({
					menuList: ['menuItem:copyUrl', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:openWithQQBrowser',
						'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:favorite', 'menuItem:share:qq',
						'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
				});
				<?php endif; ?>
				wx.showMenuItems({
					menuList: ["menuItem:profile", "menuItem:addContact", ] // 要显示的菜单项，所有menu项见附录3
				});
			});
		</script>
		<?php endif; ?>
		
		
<!-- 引入vue.js文件使用vue开发 -->
<script src="/template/static/js/public/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!-- vant -->
<script src="/template/static/js/public/vant-2.12.min.js" type="text/javascript" charset="utf-8"></script>
<script>
	var vm = new Vue({
		el: "#main",
		data() {
			return {
				the_side: <?php echo json_encode($child); ?>,//侧边栏
				length: 0,
				keyword: '',
				value: 1,
				show2: false,
				id: '', //商品id
				cover: '',
				title: '',
				price: '',
				logo: '',
				isActive: <?php echo htmlentities((app('request')->param('id') ?:  "0")); ?>,
				list: <?php echo json_encode($category); ?>,
				Data: [],
				page: 1, //页数
				last_page: '', //总页数
				isLoadding: false,
				show: false,
				note: '', //
			}
		},
		//计算属性
		computed: {},
		//监听属性
		watch: {},
		//钩子函数
		created: function() {
			this.goods();
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
			this.list.unshift({
				id: 0,
				title: '全部'
			})
			// this.the_side.unshift({
			// 	id: 0,
			// 	title: '天地初开丸'
			// })
		},
		methods: {
			handleScroll() {
				//变量scrollTop是滚动条滚动时，距离顶部的距离//变量windowHeight是可视区的高度//变量scrollHeight是滚动条的总高度
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				if (scrollTop + windowHeight >= scrollHeight && vm.isLoadding == false) {
					//加载数据的函数
					// console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
					if (this.page < this.last_page) {
						this.page++
						this.goods();
					}
				}
			},
			goods() {
				let that = this
				var loading = weui.loading('loading', {
					content: '正在载入'
				});
				$.get("?page=" + that.page, function(res) {
					that.last_page = res.data.last_page //最后页数	
					if (that.page > 1) {
						that.Data = that.Data.concat(res.data.items);
						console.log(that.Data);
						that.show = true
					} else {
						that.Data = res.data.items
						that.length = res.data.length
					}
					loading.hide();
				})
			},
			tab(index) {
				this.isActive = index
				window.location.href = "<?php echo real_url('mall/goods/index'); ?>/id/" + index
			},
			details(id) {
				// console.log(id);
				window.location.href = "<?php echo real_url('mall/goods/detail'); ?>/id/" + id
			},
			search: function() {
				window.location.href = "<?php echo real_url('mall/goods/index'); ?>/keyword/" + this.keyword
			},
			stepper(e) {
				console.log(e);
			},
			add_car: function(item, id) {
				// console.log('购物车', item)
				this.cover = item.cover
				this.title = item.title
				this.price = item.price
				this.logo = item.logo
				this.id = id
				this.show2 = true;
				this.value = 1
			},
			add: function() {
				this.show2 = false
				$.post("<?php echo url('mall/cart/add'); ?>", {
					gid: this.id,
					nums: this.value,
					remark: this.note,
				}, function(res) {
					if (res.code == 1) {
						vant.Toast.success('添加成功');
					} else {
						vant.Toast.fail(res.msg);
					}
					// console.log(res);
				});
			}
		}
	})
</script>

	</body>
</html>
